<template>
  <div id="statute" class="statute">

    <div class="ad-wrap">
      <van-loading v-if="bannerReady" class="banner_loading" />
      <div v-if="!bannerReady" class="banner-box"><img :src="bannerImg"></div>
    </div>
    <van-tabs class="topMove" v-model="statutetive" title-active-color="#D4B686">
      <van-tab title="法律法规">
        <div class="condition-wrap">
          <div class="condition-row" ref="sourceWrap">
            <van-search
              v-model="search_value"
              placeholder="请输入想要查询的关键词"
              shape="round"
              @search="onSearch"
              class="search-box"
            >
            </van-search>
          </div>
          <div class="condition-row" ref="sourceWrap">
            <span class="condition-cell" :class="{ 'selected-cell': selectedSource.indexOf(item.key) !==-1 }" @click="changeSource($event,item)" v-for="item in newsSource">
              {{ item.name }} 
            </span>
          </div>
        </div>
        
        <div v-if="nodata" class="nodata-box"><img src="../assets/nodata.png" width="72" /></div>
        <van-list
          v-model="laws_loading"
          :finished="finished"
          finished-text=""
          @load="loadList_Statute"
           style="margin-bottom:60px"
        >
        <ul class="news-list">
          <li class="news-cell" v-for="item in statute_data" @click="gotoDetail(item.id, 'laws', item.title)">
            <div class="news-title twoline">
              {{ item.title }}
            </div>
            <div v-if="item.content" class="news-content">
              {{ item.content }}
            </div>
            <div class="news-msg co-hui">
              <span class="news-source">
                {{ item.source }}
              </span>
              <span class="news-time">
                颁布日期：{{ item.time }}
              </span>
            </div>
          </li>
          <!-- <van-loading v-if="laws_loading" size="24px" vertical>加载中...</van-loading> -->
        </ul>
        </van-list>
      </van-tab>

      <van-tab title="监管问询">
        <div class="condition-wrap">
          <div class="condition-row" ref="sourceWrapInquiry">
            <van-search
              v-model="search_Inquiry"
              placeholder="请输入想要查询的关键词"
              shape="round"
              @search="onSearch_Inquiry"
              class="search-box"
            >
            </van-search>
          </div>
          <div class="condition-row" ref="sourceWrapInquiry">
            <span class="condition-cell" :class="{ 'selected-cell': current_inquirySource.indexOf(item.key) !==-1 }" @click="changeSourceInquiry($event,item)" v-for="item in inquirySource">
              {{ item.name }} 
            </span>
          </div>
        </div>
        
        <div v-if="inquiry_nodata" class="nodata-box"><img src="../assets/nodata.png" width="72" /></div>
        
        <van-list
          v-model="inquiry_loading"
          :finished="inquiry_finished"
          finished-text=""
          @load="loadList_Inquiry"
          style="margin-bottom:60px"
        >
        <ul class="news-list">
          <li class="news-cell" v-for="item in inquiry_data" @click="gotoInquiryDetail(item.id, 'regulatory', item.title, item.type, item.attach_data)">
            <div class="news-title twoline">
              {{ item.title }}
            </div>
            <div v-if="item.content" class="news-content">
              {{ item.content }}
            </div>
            <div class="news-msg co-hui">
              <span class="news-source">
                {{ item.source }}
              </span>
              <span class="news-time">
                颁发日期：{{ item.time }}
              </span>
            </div>
          </li>
        </ul>
        </van-list>
      </van-tab>

      <van-tab title="违规案例">
        <van-popup v-model="popShow" position="bottom">
          <div class="popup-title">{{pop_title}}</div>
          <div class="popup-box">
            <van-checkbox-group v-model="result_admin">
               <!-- @change="admin_change" -->
              <van-checkbox
                v-for="(item, index) in option"
                :key="item.key"
                :name="item.value"
                label-position="left"
                checked-color="#D4B686"
                :class="index%2 == 0?'fll checkbox-width bor-right':'flr checkbox-width'"
                @click="checkbox_click(item.key)"
              ><span :class="a_arr.indexOf(String(item.key)) != -1?'co-select':''">{{ item.value }}</span>
                <img
                  slot="icon"
                  slot-scope="props"
                  :class="a_arr.indexOf(String(item.key)) != -1?'selected_img':'select_img'"
                >
                <!-- <span :class="">{{ item.value }}</span> -->
              </van-checkbox>
            </van-checkbox-group>
          </div>
          <div class="btn-box">
            <van-button size="small" class="mar-lr-10 btn-width" round @click="forget_admin">重置</van-button>
            <van-button size="small" class="mar-lr-10 btn-width" type="primary" round @click="update_admin">确定</van-button>
          </div>
        </van-popup>

        <div class="condition-wrap">
          <div class="condition-row" ref="sourceWrap">
            <van-search
              v-model="search_Violation"
              placeholder="请输入想要查询的关键词"
              shape="round"
              @search="onSearch_Violation"
              class="search-box"
            >
            </van-search>
          </div>
          <div class="condition-row" ref="sourceWrap">
            <span :class="changeTagStyle(item.key)" @click="onExplameClick($event,item)" v-for="item in explameSource">
              <!-- condition-cell condition-width-thr -->
              <div>{{ item.name }}<img src="../assets/arrow_down.png" width="7" class="arrowDown" /></div>
              <!-- <span style="height:10px;font-size: .8em;">▼</span> -->
            </span>
          </div>
        </div>
        
        <div v-if="violation_nodata" class="nodata-box"><img src="../assets/nodata.png" width="72" /></div>

        <van-list
          v-model="violation_loading"
          :finished="violation_finished"
          finished-text=""
          @load="loadList_Violation"
          style="margin-bottom:60px"
        >
          <ul class="news-list">
            <li class="news-cell" v-for="item in Violation_data" @click="gotoDetail(item._id, 'violation', item.InfoSource)">
              <div class="news-title">
                {{ item.InfoSource }}
              </div>
              <!-- <p class="news-content">
                {{ item.Reason }}
              </p> -->
              <div class="news-msg co-hui">
                <span class="news-source new-li-crc co-hui oneline">
                  处罚原因：{{ item.Reason }}
                </span>
              </div>
              <div class="news-msg">
                <span class="news-source co-hui new-li-crc">
                  处罚机构：{{ item.AdminInst }}
                </span>
                <span class="news-time co-hui">
                  生效日期：{{ item.EffectiveDate }}
                </span>
              </div>
            </li>
          </ul>
        </van-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
// @ is an alias to /src
import { enums, BASIC_PDF } from '@/core/config';
import getUrlStr from '@/utils/getParam.js';
import IngotCookie from '@/utils/cookie.js';
import router from '@/router';
import { mapGetters, mapActions } from 'vuex';
import { getStatuteBanner, getStatuteData, getViolationCasesList, getViolationCasesOption, getInquiryData } from '@/api/api.js';
import { Tab, Tabs, Search, List, Row, Col, Checkbox, CheckboxGroup, Toast, Loading } from 'vant';
import selected_img from '../assets/selected.png';
import select_img from '../assets/select.png';
import { setTimeout } from 'timers';

const jumpLoginPage = () => {
  router.push({ name: 'login' })
}

export default {
  name: 'Statute',
  data() {
    return {
        title: '法规',
        bannerReady: true,
        bannerImg:'../assets/opinion-ad.jpg',
        statutetive: 0,
        current_pop:'',
        source: 0,
        // loading: true,
        finished:false,
        popShow: false,
        offsetTop:0,
        pop_title:'',
        selected_img:selected_img,
        select_img:select_img,
        // 法律法规
        laws_loading: false,
        statute_data: [],
        search_value:'',
        nodata:false,
        page_size: 10,
        page_num: 1,
        selectedSource: ['npc','csrc','sse'],
        newsSource: [
          {key:'npc',name:'全国人大常委会'},
          {key:'csrc',name:'证监会'},
          {key:'sse',name:'交易所'}
        ],

        // 监管问询
        inquiry_data:[],
        inquiry_nodata:true,
        inquiry_finished: false,
        inquiry_loading: false,
        inquiry_page_num: 1,
        search_Inquiry: '',
        current_inquirySource: ['sse','bgcz','ipo'],
        inquirySource: [
          {key:'sse',name:'交易所问询'},
          {key:'bgcz',name:'并购重组'},
          {key:'ipo',name:'IPO'}
        ],
        // selectedExplame: 'deal_admin',

        // 违规案例
        Violation_data: [],
        violation_nodata: true,
        violation_finished: false,
        violation_loading: false,
        search_Violation: '',
        Violation_page_size: 10,
        Violation_page_num: 1,
        explameSource: [
          {key:'deal_type',name:'处罚类型'},
          {key:'deal_index',name:'处罚对象'},
          {key:'deal_admin',name:'处罚机构'}
        ],
        ViolationCasesOption:{
          deal_admin:[], //处罚机构
          deal_index:[], //处罚对象
          deal_type:[]   //处罚类型
        },
        result_admin:[],

        a_arr:[],
        admin_list:[],
        index_list:[],
        key_list:[],

        api_admin:[],
        api_index:[],
        api_type:[],

        result_index:[],

        option:[],
        active_option:'deal_admin',

    }
  },

  created() {
    this.$store.commit('set_top_title',this.title);
  },
  // updated(){},
  activated() {

  },
  mounted() {
    getStatuteBanner().then(res => {
      this.bannerReady = false;
      this.bannerImg = res.data[1].img;
    })
    this.getStatuteFunc();
    this.getInquiryFunc();
    getViolationCasesOption().then(response => {
      let _admin = response.data.deal_admin;
      let _index = response.data.deal_index;
      let _type = response.data.deal_type;
      for(var key in _admin){
        this.ViolationCasesOption.deal_admin.push({key:key,value:_admin[key]})
      }
      for(var key in _index){
        this.ViolationCasesOption.deal_index.push({key:key,value:_index[key]})
      }
      for(var key in _type){
        this.ViolationCasesOption.deal_type.push({key:key,value:_type[key]})
      }
    });
    this.getViolationCasesFunc();
    if(this.getUrlStr("from")==="dataInfo"){
      this.statutetive = 2
    }
  },
  methods: {
    ...mapActions([
      'ac_gotoDetail'
    ]),
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    changeTagStyle(item){
      // console.log("item =======",item.key);
      if(item === 'deal_admin'){
        if(this.admin_list.length>0){
          return "condition-cell condition-width-thr selected-cell"
        }else{
          return "condition-cell condition-width-thr"
        }
      }else if(item === 'deal_index'){
        if(this.index_list.length>0){
          return "condition-cell condition-width-thr selected-cell"
        }else{
          return "condition-cell condition-width-thr"
        }
      }else if(item === 'deal_type'){
        if(this.key_list.length>0){
          return "condition-cell condition-width-thr selected-cell"
        }else{
          return "condition-cell condition-width-thr"
        }
      }
    },

    gotoDetail(id, api_type, title){
      console.log('正在跳转到详情页...');
      console.log('传递详情页参数：', id, api_type, title);
      this.ac_gotoDetail({id,api_type, title})     
    },

    gotoInquiryDetail(id, api_type, title, type, attach){
      console.log('attach===' + attach)
      if(attach.length > 0){
        console.log("url:"+attach[0].url," /// title:"+attach[0].title)
        this.gotoPDF(decodeURIComponent(BASIC_PDF+attach[0].url), attach[0].title)
      } else {
        this.ac_gotoDetail({id,api_type, title})
      }
    },

    gotoPDF(url,title) {
      console.log("url === ",url)
      console.log("title === ",title)
      console.log("source === ",IngotCookie.get('source'))
      if(IngotCookie.get('source')==='ios'){
        // console.log(IngotCookie.get('source'))
        window.webkit.messageHandlers.NoticeFileView.postMessage(title+'_'+url);
      }else if(IngotCookie.get('source')==='android'){
        // console.log(IngotCookie.get('source'))
        window.AndroidWebView.NoticeFileView("true", url, title);
      }
    },

    // 法律法规
    getStatuteFunc() {
      getStatuteData({
        from:this.selectedSource.toString(),
        page_size: this.page_size,
        page_num: this.page_num,
        keyword: this.search_value
      }).then(response => {
        console.log("法律法规:",response);
        // this.finished = true;
        this.laws_loading = false;
        if(response.data && response.data.total_count>0){
          this.nodata = false;
          this.statute_data = this.statute_data.concat(response.data.data_list);
        }else{
          // console.log("data is empty!!!")
          this.finished = true;
          this.nodata = true;
        }
        this.page_num += 1;
        if (this.statute_data.length >= response.data.total_count) {
          this.finished = true;
        }
      })
    },
    // 监管问询
    getInquiryFunc(){
      getInquiryData({
        from: this.current_inquirySource.toString(),
        page_size: this.page_size,
        page_num: this.inquiry_page_num,
        keyword: this.search_Inquiry
      }).then(response => {
        console.log("监管问询:",response)
        this.inquiry_loading = false;
        if(response.data && response.data.total_count>0){
          // console.log("yes,get data")
          this.inquiry_nodata = false;
          this.inquiry_data = this.inquiry_data.concat(response.data.data_list);
        }else{
          this.inquiry_nodata = true;
          this.inquiry_data = []
        }
        this.inquiry_page_num += 1;
        if (this.inquiry_data.length >= response.data.total_count) {
          this.inquiry_finished = true;
        }
      })
    },
    // 违规案例
    getViolationCasesFunc(){
      // console.log("getViolationCasesFunc")
      getViolationCasesList({
        index_key: this.api_index.toString() || '',
        admin_key: this.api_admin.toString() || '',
        type_key: this.api_type.toString() || '',
        page_size: this.page_size,
        page_num: this.Violation_page_num,
        keyword: this.search_Violation
      }).then(response => {
        console.log("违规案例:",response);
        this.violation_loading = false;
        if(response.data && response.data.total_count>0){
          this.violation_nodata = false;
          this.Violation_data = this.Violation_data.concat(response.data.data_list);
        }else{
          this.violation_nodata = true;
        }
        this.Violation_page_num += 1;
        if (this.Violation_data.length >= response.data.total_count) {
          this.violation_finished = true;
        }
      })
    },
    loadList_Statute(){
      this.laws_loading = true;
      this.getStatuteFunc();
    },
    loadList_Inquiry(){
      this.inquiry_loading = true;
      this.getInquiryFunc();
    },
    loadList_Violation(){
      this.violation_loading = true;
      this.getViolationCasesFunc();
    },
    onSearch() {
      console.log("搜索");
      this.page_num = 1;
      this.statute_data = [];
      this.getStatuteFunc();
    },
    onSearch_Inquiry() {
      // console.log(this.search_value);
      this.inquiry_page_num = 1;
      this.inquiry_data = [];
      this.getInquiryFunc();
    },
    onSearch_Violation() {
      this.Violation_page_num = 1;
      this.Violation_data = [];
      this.getViolationCasesFunc();
    },
    changeSensitive(_sens) {
      this.selectedSens = _sens;
    },
    changeSource(ev, _source) {
      // console.log(ev.target.offsetLeft);
      if(this.selectedSource.indexOf(_source.key) !== -1){
        this.selectedSource.splice(this.selectedSource.indexOf(_source.key),1)
        if(this.selectedSource.length>0){
          this.nodata = false;
        }else{
          // this.inquiry_nodata = true;
          this.selectedSource = [],
          this.getStatuteFunc()
        }
        // if(this.selectedSource.length==0){
        //   this.nodata = true;
        // }
      }else{
        this.selectedSource.push(_source.key);
      }
      this.page_num = 1;
      this.statute_data = [];
      this.getStatuteFunc();
      // this.selectedSource = _source.key;
      // this.$refs.sourceWrap.scrollLeft = ev.target.offsetLeft-84;
    },
    changeSourceInquiry(ev, _source) {
      // console.log(ev.target.offsetLeft);
      // this.current_inquirySource = _source.key;
      // this.$refs.sourceWrapInquiry.scrollLeft = ev.target.offsetLeft-84;
      console.log("_source ==",_source)
      console.log("selectedSource ==",this.current_inquirySource)
      if(this.current_inquirySource.indexOf(_source.key) !== -1){
        this.current_inquirySource.splice(this.current_inquirySource.indexOf(_source.key),1)
        // if(this.current_inquirySource.length==0){
        //   this.inquiry_nodata = true;
        // }
        if(this.current_inquirySource.length>0){
          this.inquiry_nodata = false;
        }else{
          // this.inquiry_nodata = true;
          this.current_inquirySource = []
          this.getInquiryFunc()
        }
      }else{
        this.current_inquirySource.push(_source.key);
      }
      this.inquiry_data = [];
      this.inquiry_page_num = 1;
      this.getInquiryFunc();
    },

    onExplameClick(ev, _source) {
      // console.log("source",_source.key)
      this.popShow = true;
      this.active_option = _source.key;
      if(_source.key === 'deal_admin'){
        this.pop_title = "选择处罚机构"
        this.current_pop = "admin_list"
        this.a_arr = this.admin_list
        this.option = this.ViolationCasesOption.deal_admin;
      }else if(_source.key === 'deal_index'){
        this.pop_title = "选择处罚对象"
        this.current_pop = "index_list"
        this.a_arr = this.index_list
        this.option = this.ViolationCasesOption.deal_index;
      }else if(_source.key === 'deal_type'){
        this.pop_title = "选择处罚类型"
        this.current_pop = "key_list"
        this.a_arr = this.key_list
        this.option = this.ViolationCasesOption.deal_type;
      }
      console.log("当前数组：",this[this.current_pop])
    },
    admin_change(val) {
      // console.log(val)
    },
    checkbox_click(id) {
      if(this.active_option === "deal_admin"){
        if(this.admin_list.indexOf(String(id)) === -1){
          this.admin_list.push(id)
        }else{
          this.admin_list.splice(this.admin_list.indexOf(String(id)),1);
        }
      }else if(this.active_option === "deal_index"){
        if(this.index_list.indexOf(String(id)) === -1){
          this.index_list.push(id)
        }else{
          this.index_list.splice(this.index_list.indexOf(String(id)),1);
        }
      }else if(this.active_option === "deal_type"){
        if(this.key_list.indexOf(String(id)) === -1){
          this.key_list.push(id)
        }else{
          this.key_list.splice(this.key_list.indexOf(String(id)),1);
        }
      }
      console.log(this[this.current_pop])
      // console.log(this.admin_list)
    },
    forget_admin() {
      this.result_admin = [];
      this.a_arr = [];
      if(this.active_option === "deal_admin"){
        this.admin_list = [];
        this.api_admin = [];
      }else if(this.active_option === "deal_index"){
        this.index_list = [];
        this.api_index = [];
      }else if(this.active_option === "deal_type"){
        this.key_list = [];
        this.api_key=[];
      }
    },
    update_admin() {
      this.popShow = false;
      if(this.active_option === 'deal_admin'){
        this.api_admin = this.admin_list;
        this.changeTagStyle("deal_admin")
        console.log("api_admin",this.api_admin);
      }else if(this.active_option === 'deal_index'){
        this.api_index = this.index_list;
        this.changeTagStyle("deal_index")
        console.log("api_index",this.api_index);
      }else if(this.active_option === 'deal_type'){
        this.api_type = this.key_list;
        this.changeTagStyle("deal_type")
        console.log("api_type",this.api_type);
      }
      this.Violation_page_num = 1;
      this.Violation_data = []
      this.getViolationCasesFunc();
    },
    getUrlStr(name) {
      // console.log("name",name);
      var url = document.location.toString();
    　var arrObj = url.split("?");
  　　　if (arrObj.length > 1) {
  　　　　　var arrPara = arrObj[1].split("&");
  　　　　　var arr;
  　　　　　for (var i = 0; i < arrPara.length; i++) {
  　　　　　　　arr = arrPara[i].split("=");
  　　　　　　　if (arr != null && arr[0] == name) {
  　　　　　　　　　return arr[1];
  　　　　　　　}
  　　　　　}
  　　　　　return "";
  　　　}
  　　　else { return "" }
    }
  }
}
</script>
<style>
#statute {
  width:100vw;
}
.topMove {
  margin-top: -6px;
}
.fll{
  float: left !important;
}
.flr{
  float: right !important;
}
.mar-lr-10 {
  margin: 0 10px;
}
.banner-box{
}
.ad-wrap {
  margin: 10px 10px 0 10px;
  min-height: 128px;
  /* height: auto; */
  /* height:196px; */
  background-color: #fff;
}
.ad-wrap img {
  width:100%;
  height: 100%;
  border-radius: 5px;
}

.condition-wrap{
  width:100%;
  margin:17px 0;
  box-sizing: border-box;
  padding:0 14px;
}
.condition-row {
  display: flex;
  word-break: keep-all;
  width: 100%;
  overflow: auto;
  margin-bottom: 12px;
}
.condition-row::-webkit-scrollbar{
  display: none;
}
.condition-cell{
  /* min-width: 72px; */
  /* height:26px; */
  padding: 0 10px;
  text-align: center;
  background-color: #F4ECDF;
  color:#C3A26D;
  font-size: 13px;
  border-radius: 13px;
  line-height: 26px;
  margin-right:6px;
}
.condition-width-thr{
    width: 33%;
}
.condition-cell.selected-cell {
  background-color: #D4B686;
  color:#FFFFFF;
}

.news-list {
  width:calc(100% - 14px);
  box-sizing: border-box;
  margin-right: 14px;
  /* padding-bottom: 55px; */
  border-top:1px solid #EAEAEA;
}
.news-cell{
  width: calc(100% - 14px);
  padding:15px 3px;
  margin-left:14px;
  box-sizing: border-box;
  border-bottom: 1px solid #EAEAEA;
  text-align: left;
}
.news-cell p{
  line-height: 1em;
  margin:0;
}
.news-cell .news-title{
  color:#222222;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}
.bottom-line {
  border-width: 0 0 1px 0 !important;
}
.news-cell .news-content{
  color:#757679;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 15px;
}
.news-cell .news-msg {
  display: flex;
}
.news-cell .news-msg .news-tag{
  min-width: 40px;
  height:17px;
  text-align: center;
  background-color: #F4ECDF;
  color:#C3A26D;
  font-size: 12px;
  border-radius: 9px;
  line-height: 17px;
  margin-right: 10px;
}
.news-cell .news-msg .news-source,.news-cell .news-msg .news-time{
  color:#757679;
  font-size: 12px;
}
.news-cell .news-msg .news-source{
  margin-right: 15px;
}

.new-li-crc::before{
  content: '●';
  color:#E4D6C0;
  font-size:10px;
}

.van-search {
  width: 100%;
  padding: 0 !important;
}

.search-box {
  padding: 0;
}

.popup-box {
  display: inline-block;
  padding: 10px 20px;
}

.btn-box {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.van-popup--bottom {
  width: 90% !important;
  top: auto;
  bottom: 20px !important;
  right: auto;
  left: 50%;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
}

.checkbox-width {
  width: 40%;
  padding: 10px;
  float: left;
  font-size: 0.9em
}

.van-button--primary {
    color: #fff;
    background-color: #C3A26D !important;
    border: 1px solid #C3A26D !important;
}

.btn-width {
  width: 100px;
}

.nodata-box {
  height: 40vh;
  padding: 10vh;
}

.co-hui {
  color: #757679 !important;
}

.co-select {
  color: #C3A26D;
}

.oneline {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.twoline {
  overflow : hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.popup-title{
  padding: 15px 0;
  font-weight: bold;
  color: #222222;
  border-bottom: 1px solid #f1f1f1;
}

.sline {
  position: absolute;
  left:50%;
  width:1px;
  height: 100%;
  background-color: #f1f1f1;
  z-index: 999;
}

.bor-right{
  border-right: 1px solid #f1f1f1;
}

.select_img{
  width: 1em;
  height: 1em;
  background: url('../assets/select.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.selected_img{
  width: 1em;
  height: 1em;
  background: url('../assets/selected.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.arrowDown {
  margin-left:15px;
  padding-top:-4px
}
.van-tab--active {
    font-weight: 600 !important;
    color: #323233;
}
.banner_loading{
  position: absolute;
  left: calc(50% - 24px);
  top: 48px;
}
.van-checkbox__icon {
    height: 20px;
    float: right;
}
</style>